/***

Box
===

A simple box with an header, a body and a footer where you can put listings into

```
<div class="styleguide--demo">
    <div class="box">
      <header class="box__header"><b>Box title</b></header>
      <div class="box__body">Content goes here</div>
      <footer class="box__footer">After content</footer>
    </div>
</div>
```

***/

.box {
  background:$color__background;
  border-radius:2px;
  border:1px solid $color__border;
  margin-top:20px;
}

.box__body {
  /*margin:0 -1px;*/
}

.box__header {
  height:55px;
  line-height:55px;
  border-bottom:1px solid $color__border--light;
  padding:0 20px;
}

.box__filter {
  padding:10px 0;
  margin-left:-5px;

  li {
    display:inline;
  }

  a {
    display:inline-block;
    height:35px;
    line-height:35px;
    text-decoration:none;
    padding:0 20px;
    border-radius:17px;
    color:$color__link;
    background:$color__background;

    &.s--on {
      background:$color__border;
      color:$color__text;
    }

    &:hover {
      color:$color__text;
    }
  }
}

.box__footer {
  height:55px;
  line-height:55px;
  border-top:1px solid $color__border--light;
  padding:0 20px;
}
